<template>
  <div class="CreateQN">
    <div class="iconfont icon-jia" @click="open()"></div>
    <div class="title" style="text-align: center">
      <el-input v-model="title" placeholder="输入标题" />
    </div>
  </div>
  <MyModal ref="modal" @submit="changeQuestion" />
  <div class="AddQuestion" v-for="(item, index) in questions" :key="item.id">
    <AddQuestion :question="item" :order="index" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MyModal from '@/components/MyModal.vue'
import AddQuestion from '@/components/AddQuestion.vue'

const modal = ref()
const title = ref('')
const route = useRouter()
const questions = ref(JSON.parse(localStorage.getItem('newQuestions')) || [])
onMounted(() => {
  route.push(`/CreateQN/ChoiceQues`)
})
function open() {
  modal.value.dialogFormVisible = true
}
function changeQuestion(newQuestions) {
  questions.value = newQuestions
  console.log(newQuestions)
}
</script>

<style lang="less" scoped>
.CreateQN {
  .icon-jia {
    font-size: 67px;
    color: rgb(104, 209, 250);
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 9999;
    &:hover {
      color: rgb(17, 170, 231);
    }
    &:active {
      font-size: 57px;
    }
  }
  .title {
    ::v-deep .el-input__inner {
      height: 55px;
      text-align: center;
    }
    .el-input {
      width: 440px;
      height: 70px;
      margin: 5px auto;
      font-size: 58px;
    }
  }
  ::v-deep .el-dialog__header {
    text-align: center;
    .el-dialog__title {
      font-size: 30px;
    }
  }
}
.AddQuestion {
  border: 1px solid #ddd;
  padding: 13px;
  border-radius: 5px;
  margin: 4px;
}
</style>